<!--
  * 通知  表单
  * 
  * @Author:    1024创新实验室-主任：卓大 
  * @Date:      2022-08-21 19:52:43 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
-->
<template>
    <a-form
    :model="formState"
    style="padding: 40px;"
    :label-col="{ span: 5 }"
    :rules="rules"
    >
        <a-row>
            <a-col :span="8">
                <a-form-item label="项目编号" name="projectCode">
                    <a-input-search
                    v-model:value="formData.projectCode"
                    placeholder="项目编号"
                    @search="onSearch"
                    :disabled="disabled"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="8" >
                <a-form-item label="项目名称" name="projectName">
                    <a-input v-model:value="formData.projectName" disabled placeholder="项目名称" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="项目地址" name="address">
                    <a-input v-model:value="formData.address" disabled placeholder="项目地址" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item label="日期" name="workDay">
                    <a-date-picker v-model:value="formData.workDay" :disabled="disabled"  value-format="YYYY-MM-DD" />
                </a-form-item>
            </a-col>
        </a-row>
    

    
    <a-card style="text-align: center;">
        <a-table
            rowKey="noticeId"
            :columns="tableColumns"
            :dataSource="tableData"
            size="small"
            bordered
            :pagination="false"
            :scroll="{ y: 250}"
            >
            <template #bodyCell="{ column, record, text,index }">
              <template v-if="column.dataIndex === 'index'">
                {{ index+1 }}
              </template>
                <template v-if="column.dataIndex === 'outsourcingPersonnelId'">
                  <a-select
                    v-model:value="record.outsourcingPersonnelId"
                    style="width: 100%"
                    :options="userOptions"
                    :disabled="disabled"
                  ></a-select>
                </template>
                <template v-if="column.dataIndex === 'hourage'">
                  <a-select
                    v-model:value="record.hourage"
                    style="width: 100%"
                    :disabled="disabled"
                    :options="[{value:0.5,label:'半天'},{value:1,label:'一天'}]"
                  ></a-select>
                </template>
                <template v-if="column.dataIndex === 'location'">
                  <!-- <a-input v-model:value="record.location" placeholder="施工位置" /> -->
                  <DictSelectByKey style="width: 100%" :disabled="disabled"
                             key-code="construction_location"
                             v-model:value="record.location" />
                </template>
                <template v-if="column.dataIndex === 'workContent'">
                  <a-input v-model:value="record.workContent" :disabled="disabled" placeholder="工作内容" />
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a-button @click="onDelete(index)" :disabled="disabled" danger type="link">删除</a-button>
                </template>
            </template>
        </a-table>
        <a-button type="dashed" shape="round" @click="add" style="margin-top: 20px;" :disabled="disabled">
          <PlusOutlined />
          添加
        </a-button>
    </a-card>
  </a-form>
</template>

<script setup>
  import { reactive, ref, onMounted, watch, computed, nextTick,defineProps } from 'vue';
  import {projectDailyReportApi} from "/@/api/business/oa/projectDailyReport.js";
  import { message } from 'ant-design-vue';
  import DictSelectByKey from '/@/components/support/dict-select-by-key/index.vue';

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
        return {};
      },
    },
  })
  const disabled = ref(false)
  // console.log(props.modelValue)
  // watch(() => props.modelValue, (newValue) => {
  //   Object.assign(formData, newValue);
  //   console.log(newValue)
  // });
  // 表单默认数据
  const defaultFormData = {
    projectId:'',
    projectCode:'',
    projectName:'',//
    projectLeaderId:'',
    address:'',
    workDay:null
  };
  // 表单数据
  const formData = reactive({ ...defaultFormData });
  // 表单参数限制
  const formRules = {
    projectCode: [{ required: true, message: '请输入' }],
    projectName: [{ required: true, message: '请获取' }],
    address: [{ required: true, message: '请获取' }],
    workDay: [{ required: true, message: '请选择' }],
  };

    //表格数据
    const tableData = ref([{
      outsourcingPersonnelId:'',
      hourage:'',
      location:'',
      workContent:'',
    }])
    // 表格字段
    const tableColumns = ref([
    {
      title: `序号`,
      dataIndex: 'index',
      width: 50,
      align:'center'
    },
    {
      title: `外包员工`,
      dataIndex: 'outsourcingPersonnelId',
      ellipsis: true,
    },
    {
      title: `工作时长`,
      dataIndex: 'hourage',
      ellipsis: true,
    },
    {
      title: `施工位置`,
      dataIndex: 'location',
      ellipsis: true,
    },
    {
      title: `工作内容`,
      dataIndex: 'workContent',
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 90,
    },
  ]);
  // 通过项目编号查询项目信息
  function onSearch(){
    projectDailyReportApi.getProject(formData.projectCode).then(res=>{
      console.log(res.data);
      formData.projectName = res.data.projectName
      formData.address = res.data.address
      formData.projectId = res.data.id
      formData.projectLeaderId = res.data.projectLeaderId
    })
  }
  // 表格添加外包人员
  function add(){
    tableData.value.push({
      outsourcingPersonnelId:'',
      hourage:'',
      location:'',
      workContent:'',
    })
  }
  // 删除外包人员
  function onDelete(index){
    console.log(index);
    tableData.value.splice(index, 1);
    console.log(tableData.value);
  }
  // 外包人员下拉
  const userOptions= ref([])
  function getuser(){
    projectDailyReportApi.queryAllByGroupLeaderId().then(res=>{
      console.log(res.data);
      userOptions.value = res.data.map(item=>{
        return {
          value:item.id,
          label:item.name
        }
      })
    })
  }
  
  // 数据提交
  const emits = defineEmits(['update:value']);
  function submit2(){
    if(!formData.projectId){
      message.error('请先获取项目信息');
      return
    }
    let obj = {
      projectId:formData.projectId,
      approverId:formData.projectLeaderId,
      workDay:formData.workDay,
      timesheetDetailsAddFormList:tableData.value
    }
    emits("update:value", obj);
    return obj
  }
  function onload(){
    Object.assign(formData, defaultFormData);
    tableData.value = [{
      outsourcingPersonnelId:'',
      hourage:'',
      location:'',
      workContent:'',
    }]
  }
  defineExpose({
    submit2,
  });
  onMounted(()=>{
    getuser();
    // console.log(props.modelValue)
    if(props.modelValue.projectId){
      // disabled.value = true
      formData.projectId = props.modelValue.projectId
      formData.projectCode = props.modelValue.projectCode
      formData.projectName = props.modelValue.projectName
      formData.address = props.modelValue.projectAddress
      formData.workDay = props.modelValue.workDay
    }
    if(props.modelValue.timesheetDetailsVOList&&props.modelValue.timesheetDetailsVOList.length){
      tableData.value = props.modelValue.timesheetDetailsVOList.map(item=>{
        return {
          outsourcingPersonnelId:item.id,
          hourage:item.hourage,
          location:item.location,
          workContent:item.workContent,
        }
      })
    }
  })
</script>

<style lang="less" scoped>
  .visible-list {
    display: flex;
    flex-wrap: wrap;
    .visible-item {
      padding-top: 8px;
    }
  }
</style>

